<template>
  <el-dialog :title="title" :visible.sync="visible" width="600px" :before-close="handleClose">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
      <el-form-item label="装备名称：" prop="equipmentId">
        <el-select v-model="ruleForm.equipmentId" :disabled="dialogType == 'look'" placeholder="请选择" clearable filterable
          class="input-w300">
          <el-option v-for="item in equipmentList" :key="item.id" :label="item.equipmentName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="姓名：" prop="personnelId">
        <el-select v-model="ruleForm.personnelId" :disabled="dialogType == 'look'" placeholder="请选择" clearable filterable
          class="input-w300">
          <el-option v-for="item in userList" :key="item.id" :label="item.personnelName  + (item.unitFullName ? '-' + item.unitFullName:'') " :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数量：" prop="num">
        <el-input :disabled="dialogType == 'look'" v-model.trim="ruleForm.num" type="number" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item>
      <!-- <el-form-item label="备注：" prop="remark">
        <el-input :disabled="dialogType == 'look'" v-model.trim="ruleForm.remark" placeholder="请输入" clearable
          class="input-w300" maxlength="50"></el-input>
      </el-form-item> -->
      <el-form-item label="配发状态：" prop="allotmentStatus">
        <el-radio-group v-model="ruleForm.allotmentStatus">
          <el-radio :disabled="dialogType == 'look'" v-for="dict in dict.type.sys_allotment_enable" :key="dict.value"
            :label="dict.value">{{ dict.label }}</el-radio>
        </el-radio-group>
      </el-form-item>

    </el-form>
    <span slot="footer" class="dialog-footer" v-if="dialogType != 'look'">
      <el-button type="primary" @click="confirmForm('ruleForm')">确 定</el-button>
      <el-button @click="handleCancel">取 消</el-button>
    </span>
  </el-dialog>
</template>
  
<script>
import { findUserList } from "@/api/skill";
import { addAllotment, updateAllotment, equipmentList } from "@/api/equipment";

export default {
  components: {},
  props: {
    visible: {
      default: false,
      type: Boolean
    },
    dialogType: {
      default: '',
      type: String
    },
    title: {
      default: '',
      type: String
    },
    equipmentInfo: {
      type: Object,
      default: {},
    }
  },
  dicts: ['sys_allotment_enable'],

  data () {
    return {
      userList: this.$store.state.user.userList,
      equipmentName: '',
      personName: '',
      ruleForm: {
        allotmentStatus: false,
        equipmentId: '',
        personnelId: '',
        remark: '',
        num: '',
      },
      equipmentList:[],
      rules: {
        equipmentId: [
          { required: true, message: '请选择装备', trigger: 'blur' }
        ],
        personnelId: [
          { required: true, message: '请选择人员', trigger: 'blur' }
        ],
        num: [
          { required: true, message: '请输入数量', trigger: 'blur' }
        ],
        allotmentStatus: [
          { required: true, message: '请选择配发状态', trigger: 'blur' }
        ],

      }
    };
  },
  watch: {
    visible (val) {
      if (val) {
        this.querySearchEquipment()
        if (this.equipmentInfo && this.equipmentInfo.id) {
          this.getEquipmentInfo();
        } else {
          this.personName = '';
          this.equipmentName = '';
          this.ruleForm = {
            allotmentStatus: '',
            equipmentId: '',
            personnelId: '',
            remark: '',
            num: '',
          }
        }
      } else {
        this.$refs['ruleForm'].resetFields();
      }
    }
  },
  methods: {
    // 获取装备派发详情
    async getEquipmentInfo () {
      this.equipmentInfo.allotmentStatus = String(this.equipmentInfo.allotmentStatus)
      this.ruleForm = this.equipmentInfo;
      this.personName = this.ruleForm.personnelName;
      this.equipmentName = this.ruleForm.equipmentName;
    },

    // 查询装备
    async querySearchEquipment () {
        let res = await equipmentList({
          pageNum:1,
          pageSize:9999
        });
        if (res.code == 200) {
          this.equipmentList=res.rows || []
        } else {
        }
    },
    // 确认提交按钮
    async confirmForm (form) {
      this.$refs[form].validate(async (valid) => {
        if (!valid) return false;
        let params = {
          allotmentStatus: this.ruleForm.allotmentStatus,
          equipmentId: this.ruleForm.equipmentId,
          personnelId: this.ruleForm.personnelId,
          remark: this.ruleForm.remark,
          num: this.ruleForm.num,
        }
        let res = null
        if (this.ruleForm.id) {
          params.id = this.ruleForm.id;
          res = await updateAllotment(params)
        } else {
          res = await addAllotment(params)
        }
        if (res.code == 200) {
          this.$message.success('成功')
          this.handleClose();
        } else {
          this.$message.error(res.msg)
        }

      })
    },

    // 取消
    handleCancel () {
      this.$emit('update:visible', false)
    },
    // 关闭
    handleClose () {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    // 防抖函数
    debounceFun (func, delay) {
      let timer = null;
      return function (...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    },
  }
};
</script>
<style lang='scss' scoped></style>
  